// 图片懒加载注册

import { useIntersectionObserver } from '@vueuse/core'
// 导入默认图片
import defaultImg from '@/assets/images/200.png'
const directivePlugin = {
  install (app) {
    app.directive('lazy-img', {
      mounted (el, binding) {
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting:元素进入到视口区域 true
            // 不在视口区域 false
            // 当首次完成图片正式加载之后 监听就应该停止才对
            // 错误先行
            if (isIntersecting) {
              // 容错处理
              el.onerror = function () {
                el.src = defaultImg
              }
              // 正式发送请求
              el.src = binding.value
              // 停止监听
              stop()
            }
          }
        )
      }
    })
  }
}
export default directivePlugin
